<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../lib/bxslider/css/jquery.bxslider.css">
    <!-- 倒计时 -->
    <script src="../lib/jcountdown/jquery-1.8.2.min.js"></script>
    <link href="../lib/jcountdown/jcountdown.css" rel="stylesheet" type="text/css">
    <script src="../lib/jcountdown/jquery.jcountdown.min.js"></script>


    <link rel="stylesheet" href="../css/top.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- <script src="../lib/jquery-1.12.4.js"></script> -->
    <script src="../lib/bxslider/js/jquery.bxslider.js"></script>
    <script src="../lib/template-web.js"></script>

    <!-- 轮播图 -->
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <script src="../lib/swiper/js/swiper.min.js"></script>
</head>
<body> 
    <!-- 头部导航栏 -->
    <nav>
        <div class="nav-wrap">
            <a>小米商城</a>
            <span>|</span>
            <a>MIUI</a>
            <span>|</span>
            <a>loT</a>
            <span>|</span>
            <a>云服务</a>
            <span>|</span>
            <a>金融</a>
            <span>|</span>
            <a>有品</a>
            <span>|</span>
            <a>小爱开放平台</a>
            <span>|</span>
            <a>企业团购</a>
            <span>|</span>
            <a>资质证照</a>
            <span>|</span>
            <a>协议规则</a>
            <span>|</span>
            <a>下载app</a>
            <span>|</span>
            <a>SelectLocation</a>
            <div class="nav_right">
                <a href="./signIn.html">登录</a>
                <span>|</span>
                <a href="./register.html">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
                <a href="javascript:void(0)" class="shopping_cart">购物车(0)</a>
            </div>
        </div>
    </nav>
    <!-- 搜索栏 -->
    <div class="site-header">
        <div class="hearder_l">
            <div class="con">
                <a href="#"> <img src="../images/mi-home.png" alt=""></a>
                <a href="#"> <img src="../images/mi-logo.png" alt=""></a>
            </div>
        </div>
        <div class="hearder_r">
            <div class="hearder_nav">
                <a href="" class="phone">
                    小米手机

                </a>
                <a href="">Redmi红米</a>
                <a href="">电视</a>
                <a href="">笔记本</a>
                <a href="">家电</a>
                <a href="">路由器</a>
                <a href="">智能硬件</a>
                <a href="">服务</a>
                <a href="">社区 </a>
            </div>
            <form class="hearder_search">
                <input type="text" class='input'>
                <a href="" class="a"></a>
                <ul class="ul"></ul>
            </form>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <ul class="bxslider">
            <li><img src="../images/1.jpg"/></li>
            <li><img src="../images/2.jpg"/></li>
            <li><img src="../images/3.jpg"/></li>
            <li><img src="../images/4.jpg"/></li>
            <li><img src="../images/5.jpg"/></li>
          </ul>
          <ul class="banner_r">
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
              <li><a href="">手机卡 电话卡<em>></em></a></li>
          </ul>
          <div class="banner_list_details"></div>
    </div>
    <div class="home">
        <div class="home_l">
            <li><a href=""><img src="../images/icon1.png" alt="">小米秒杀</a></li>
            <li><a href=""><img src="../images/icon2.png" alt="">小米秒杀</a></li>
            <li><a href=""><img src="../images/icon3.png" alt="">小米秒杀</a></li>
            <li><a href=""><img src="../images/icon4.png" alt="">小米秒杀</a></li>
            <li><a href=""><img src="../images/icon5.png" alt="">小米秒杀</a></li>
            <li><a href=""><img src="../images/icon6.png" alt="">小米秒杀</a></li>
        </div>
        <div class="home_r">
            <a href=""><img src="../images/promoList1.jpg" alt=""></a>
            <a href=""><img src="../images/promoList2.jpg" alt=""></a>
            <a href=""><img src="../images/promoList3.jpg" alt=""></a>
        </div>
        
    </div>
    <div id="flashsale">
        <div class="flashsale-warp">
            <h2>
                小米闪购
                <span>
                    <button class="pre">&lt</button><button class="next">&gt</button>
                </span>
                
            </h2>
            
            <div class="flashsale_l">
                <p>14:00场</p>
                <img src="../images/flash.jpg" alt="">
                <h3>距离开始该有</h3>
                <div class="countdown"></div>
            </div>
            <div class="flashsale_r">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                   
                </div>
            </div>
        </div>
        <div class="home_banner">
            <a href="">
                <img src="../images/11.webp" alt="">
            </a>
        </div>
        <div class="home_brick">
            <h2>
                手机
                <span>
                    查看全部>
                </span>
            </h2>
            <div class="home_brick_l">
                <a href="">
                    <img src="../images/12.webp" alt="">
                </a>
            </div>
            <div class="home_brick_r"></div>
        </div>
        <div class="home_banner">
            <a href="">
                <img src="../images/11.webp" alt="">
            </a>
        </div>
        <div class="home_television">
            <h2>
                电视
                <a href="">电视影音</a>
                <a href="">热门</a>
               
            </h2>
            <div class="home_television_l">
                <a href="">
                    <img src="../images/14.webp" alt="">
                </a>
                <a href="">
                    <img src="../images/14.webp" alt="">
                </a>
            </div>
            <div class="home_television_r">
                <div class="home_television_r_1"></div>
                <div class="home_television_r_2"></div>
            </div>
        </div>
    </div>
    <!-- <script>
        console.log(22222222);
        var shopping= $('nav .shopping_cart');
        shopping.on("click",function(){ 
        console.log(111111111);
        // shopping();
    })
    </script> -->
    <script type="text/template" id="home_television_automatic">
        <%for(var i=0;i<7;i++){%>
           <li>
               <a href="">
                   <img src="../images/15webp.webp" alt="">
                   <h3>小米电视4c 32寸</h3>
                   <h4>高清液晶屏</h4>
                   <h5>799元</h5>
               </a>
           </li>
        <%}%>
        <li>
            <a href="">
                <div class="left">
                    <h3>小米电视4c 32寸</h3>
                    <h4>高清液晶屏</h4>
                    <h5>799元</h5>
                </div>
                <div class="right">
                    <img src="../images/15webp.webp" alt="">
                </div>
            </a>
            <a href="">
                <div class="left">
                   <span>浏览更多</span>
                   <em>电视影音</em>
                </div>
                <div class="right">
                    <img src="../images/16.jpg" alt="">
                </div>
            </a>
        </li>
    </script>
    <script type="text/template" id="phone_template">
        <ul>
            {{each json}}
            <%if($index>6)return%>
            <li>
                <a href="{{$value.href}}">
                    <img src="{{$value.src}}" alt="">
                    <p>{{$value.name}}</p>
                    <span>{{$value.name}}</span>
                </a>
            </li>
            {{/each}}
        </ul>
    </script>
    <script type="text/template" id="home_brick_automatic">
        <%for(var i=0;i<8;i++){%>
           <li>
               <a href="">
                   <img src="../images/13.webp" alt="">
                   <h3>小米10 青春版 5G</h3>
                   <h4>50倍潜望式变焦/轻薄5G手机</h4>
                   <h5>1899元起</h5>
               </a>
           </li>
        <%}%>
    </script>
    
    <script type="text/template" id="list_rotation">
             <%for(var i=0;i<3;i++){%>
             <div class="swiper-slide">
                <%for(var j=0;j<4;j++){%>
                <li>
                    <a href="detailsPage.html">
                        <img src="../images/flash-2.jpg" alt="">
                        <h3>小米净水器</h3>
                        <h4>600加仑通量</h4>
                        <h5>1699元</h5>
                    </a>
                </li>
                <%}%>
            </div>
           <%}%>
    </script>
    <script type="text/template" id="list_details">
        <ul class="list_details_con">
             {{each json}}
            <li>
                <a href="{{$value.href}}">
                    <img src="{{$value.src}}" alt="" >
                    <span>{{$value.name}}</span>
                </a>
            </li>
            {{/each}}
    
        </ul>
    </script>
    <!-- <script>
         $.get('../../src/js/data.json',function(data){
                  var html = template('list_details',{"json":data});
                
                  $('.banner_list_details').append(html);
              },'json')
    </script> -->
    <script src="../js/public.js"></script>
    <script src="../js/index.js"></script>
    <script>        
        var swiper = new Swiper ('.swiper-container', {
          direction: 'horizontal', // 垂直切换选项
          loop: true, // 循环模式选项
          
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        })     
        $(".flashsale-warp h2 .pre").click(function(){

        swiper.slidePrev();

        });

        $(".flashsale-warp h2 .next").click(function(){

        swiper.slideNext();

        });   
        </script>
</body>
</html>